<template>
  <div id="patient">
    <!-- <van-popup v-model="show" position="right" :style="{ width: '80%', height: '100%' }">
      <!- <div class="title">完成情况</div>
      <ul id="completion" class="clearfix" @click="execution($event)">
        <li class="active">全部</li>
        <li data-com="2">未完成</li>
        <li data-com="1">已完成</li>
      </ul> ->
      <div class="title">病种</div>
      <ul id="disease" class="clearfix" @click="disease($event)">
        <li class="active">全部</li>
        <li v-for="item in jibing" :key="item.id">{{item.title}}</li>
      </ul>
      <!- <div class="title">BMI</div>
      <ul id="bmi" class="clearfix" @click="BMI($event)">
        <li class="active" data-idx="1">正常</li>
        <li data-idx="2">偏瘦</li>
        <li data-idx="3">偏胖</li>
      </ul> ->
      <van-button type="default" @click="show=false">取消</van-button>
      <van-button type="info" @click="screen">确定</van-button>
    </van-popup> -->
    <van-nav-bar title="患者" @click-left="back" left-arrow left-text="返回" fixed placeholder>
      <!-- <template #left>
        <van-icon name="scan" size="20" />
      </template>-->
      <!-- <template #right>
        <img src="@/assets/images/doctor202007171725 _10.png" alt @click="show = true" />
      </template> -->
    </van-nav-bar>
    <div class="main">
      <van-search
        v-model="init.key"
        placeholder="请输入搜索关键词"
        input-align="center"
        bind:search="onSearch"
        bind:cancel="onCancel"
      />
      <van-empty image="search" description="暂无数据" v-if="list.length === 0" />
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" v-if="list.length">
          <van-swipe-cell v-for="(item,index) in list" :key="index">
            <van-row
              type="flex"
              justify="space-around"
              align="center"
            >
              <van-col span="3" class="avatar" >
                <img
                  :src="
                    item.img ? item.img : require('@/assets/images/avatar.png')
                  "
                  alt
                />
                
                <img v-if="item.isnew == 1" class="label_img" src="@/assets/images/New-Tga 4.png" alt="">
              </van-col>
              <van-col span="15">
                <div class="gr">
                  <span class="name">{{ item.name }}</span>
                  <van-tag plain type="primary" v-if="item.jibing"> {{ item.jibing }}  </van-tag>
                  <van-tag plain type="danger" v-if="item.age"> {{ item.age }}岁</van-tag>
                  <!-- <van-tag plain type="warning" v-if="item.isnew"> 新增 </van-tag> -->
                </div>
                <div>电话：{{ item.tel1 }}</div>
                <div>新增：{{item.lognums == 0 ? '暂无新增' : item.lognums + '条复康日志' }}</div>
              </van-col>

              <van-col span="2" style="position: relative;">
                <!-- <div v-if="item.msgnums>0" @click.stop="goSingle(item)">
                  <img src="@/assets/images/doctor202007171725 _11.png" alt class="tx" />
                  <span class="van-info info" badge="99+">{{item.msgnums}}</span>
                </div> -->
                <div class="goCode" @click.stop="toCode(index)">
                  <img src="@/assets/images/code_btn.png" alt class="tx" />
                </div>
              </van-col>
            </van-row>
           
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- <div class="page">
      <van-pagination
        v-model="init.page"
        :total-items="countpage"
        :show-page-size="3"
        @change="pageChange"
      />
    </div>-->
  </div>
</template>

<script>
import { patient,RefreshPatientMa } from "@/apis/patient";
import { Dialog } from 'vant';
export default {
  data() {
    return {
      
      list: [],
      show: false,
      loading: false,
      finished: false,
      refreshing: false,
      jibing:[],
      init: {
        key: "",
        page: 1,
        jibing: "",
        bmi: "",
        wcstate: "",
        ysid:null,
        gwid:null
      },
      form: { name: "", id: "" },
      countpage: "",
    };
  },
  methods: {
    back() {
      sessionStorage.setItem('adviserId',this.init.gwid)
      this.$router.go(-1); //返回上一层
    },
   
    execution(el) {
      if (el.target.localName !== "ul") {
        let doc = document.querySelector("#completion");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        this.init.wcstate = el.target.getAttribute("data-com");
      }
    },
    disease(el) {
      if (el.target.localName !== "ul") {
        let doc = document.querySelector("#disease");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        this.init.jibing = el.target.innerText;
        if(this.init.jibing == "全部"){
          this.init.jibing = ""
        }
        el.target.setAttribute("class", "active");
      }
    },
    BMI(el) {
      if (el.target.localName !== "ul") {
        let doc = document.querySelector("#bmi");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        this.init.bmi = el.target.getAttribute("data-idx");
        el.target.setAttribute("class", "active");
      }
    },
    onSearch() {
      this.list = [];
      patient(this.init)
        .then((res) => {
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }
          res.data.list.forEach((item) => {
            this.list.push(item);
          });
          this.init.page++;
          if (this.list.length === res.data.list.length) {
            this.loading = false;
            this.finished = true;
          }
          this.countpage = res.data.countpage;
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    screen() {
      this.list = [];
      this.init.page = 1
      patient(this.init)
        .then((res) => {
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }
          res.data.list.forEach((item) => {
            this.list.push(item);
          });
          this.init.page++;
          if (this.list.length === res.data.list.length) {
            this.loading = false;
            this.finished = true;
          }
          this.countpage = res.data.countpage;
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
      this.show = false;
    },
    toCode(index) {
      this.form.name = this.list[index].name;
      this.form.id = this.list[index].id;
      console.log(this.form);
      localStorage.setItem("form", JSON.stringify(this.form));
      this.$router.push(`/qrCode/`);
    },

    patient() {
      patient(this.init)
        .then((res) => {
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }
          res.data.list.forEach((item) => {
            this.list.push(item);
          });
          this.init.page++;
          if (this.list.length === res.data.list.length) {
            this.loading = false;
            this.finished = true;
          }
          this.countpage = res.data.countpage;
          sessionStorage.removeItem('adviserId')
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    onRefresh() {
      // 清空列表数据
      this.init.page = 1;
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.patient();
    },
  },
  mounted() {
    this.patient();

  },
  computed: {
    key() {
      return this.init.key;
    },
  },
  created() {
    this.init.gwid = sessionStorage.getItem('adviserId')
    this.init.ysid = parseInt(this.$route.params.id)
  },
  watch: {
    "init.key": {
      deep: true,
      handler: function (newV, oldV) {
        this.init.page = 1;
        this.list = [];
        this.patient();
      },
    },
  },
};
</script>

<style lang="less">
#patient {
  text-align: left;
  padding-bottom: 40px;
  .avatar {
    position: relative;
    img {
      border-radius: 50%;
      width: 50px;
      height: 52px;
    }
    .label_img{
      border-radius: 0%;
      width: 30px;
      height: 30px;
      position: absolute;
      top: -5px;
      right: -5px;
      z-index: 10;
    }
  }
  .van-popup {
    padding: 10px;
    .title {
      margin-bottom: 15px;
      font-size: 16px;
      margin-top: 30px;
    }
    .van-button {
      margin-top: 20px;
      width: 115px;
      height: 42px;
      margin-right: 10px;
    }
    li {
      float: left;
      width: 45%;
      height: 26px;
      line-height: 26px;
      background: rgba(245, 245, 245, 1);
      border-radius: 4px;
      margin-right: 7px;
      margin-bottom: 7px;
      text-align: center;
      &.active {
        border: 1px solid rgba(69, 137, 237, 1);
        background: rgba(255, 255, 255, 1);
        color: rgba(69, 137, 237, 1);
      }
    }
  }
  .gr {
    margin-bottom: 10px;
    .name {
      font-size: 15px;
      font-weight: bold;
    }
  }
  .tx {
    width: 20px;
  }
  .addPatient {
    img {
      width: 73px;
      height: 73px;
    }
  }
  .goCode {
    position: relative;
    z-index: 20;
  }
  .van-info {
    left: 4px;
    right: auto;
  }
  .van-nav-bar__right {
    img {
      width: 20px;
    }
  }
  .van-swipe-cell__wrapper {
    padding: 15px 0;
    background-color: #fff;
    border-bottom: 1px solid #f3f3f3;
    .van-button {
      height: 100%;
      &.TreatmentPlan {
        background-color: #72b3f5;
        border: 1px solid #72b3f5;
      }
    }
  }
  .addPatient {
    position: fixed;
    right: 0;
    bottom: 90px;
  }
  .page {
    margin-bottom: 15px;
  }
  .van-nav-bar {
    .van-nav-bar__text,
    .van-icon {
      color: #404040;
    }
  }
}
</style>
